<template>
	<view class="register">
		<xlg-slideCode :session_id="session_id" v-if="isShow" @close="slideCode_show = false" @success="slideCode_success"></xlg-slideCode>

		<u-form ref='uForm' :rules="rules" :model="model">
			<view class="tel">
				<u-form-item prop="phone">
					<input type="tel" class="input" placeholder="手机号" v-model='model.phone' />
				</u-form-item>
				<u-form-item>
					<view class="bth" @click='sendCode'>{{codeMsg}}</view>
				</u-form-item>
			</view>
			<view class="line"></view>
			<u-form-item>
				<view class="inputcom">
					<input type="tel" placeholder="输入验证码" v-model='model.code' />
				</view>
			</u-form-item>
			<view class="line"></view>
			<u-form-item prop='password'>
				<view class="inputcom">
				<input type="tel" placeholder="输入密码" v-model='model.password'/>
				</view>
			</u-form-item>
			<view class="line"></view>
			<u-form-item prop='rePassword'>
				<view class="inputcom">
				<input type="tel" placeholder="确认密码" v-model='model.rePassword'/>
				</view>
			</u-form-item>
			<view class="line"></view>
		<u-form-item>
				<view class="check">
					<u-checkbox-group v-model="checkboxValue1" @change="checkboxChange">
						<u-checkbox name="选中" shape="circle">
						</u-checkbox>
						<view>同意
							<text @click="" style="color:#105CF0;">用户协议</text>、及
							<text @click="" style="color:#105CF0;">隐私政策</text>
						</view>
					</u-checkbox-group>
				</view>
			</u-form-item>
			<view class="btn">
				<u-button @click='register'>注册</u-button>
			</view>
		</u-form>
	</view>
</template>

<script>
import { sendCode  , register } from '@/api/login.js'
import { mapMutations } from 'vuex'
import xlgSlideCode from '@/slideCode/pages/verifySlide.vue'
// import { Encrypt } from '@/utils/aes.js'
export default{
	components:{
		xlgSlideCode
	},
	data () {
		return {
			//验证滑块
			isShow:false,
			slideCode_show: false,//图形验证码是否显示
            slideCode_yanzheng: false,//图形验证码是否验证通过
            slideCode_x: 10,//图形验证码的水平偏移值
            session_id: Math.floor(Math.random()*9999999999),
			//end
			checkboxValue1:[],
			model:{
				phone:'',//手机号
				code:'',//验证码
				password:'',//密码
				rePassword:''//确认密码
			}, //输入内容
			rules:{  //验证规则
				phone: [
					{
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change'],
					},
					{
						pattern:/^1[23456789]\d{9}$/,
						message: '请输入11位手机号'
					}
				],
				password:[
					{
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change'],
					},
					{
						pattern:/^(?![0-9]+$)(?![a-z]+$)[0-9a-z]{6,16}$/,
						message: '请输入6-12位字符,必须含有字母和数字'
					}
				],
				rePassword:[
					{
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change'],
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							return value == this.model.password;
						},
						message: '俩次密码输入不想等',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
				]
			},
			timer:null, //开启定时器
			codeMsg:'获取验证码', //验证码文字
			validate_code_id:'',//验证码的id
		}
	},
	methods:{
		...mapMutations(['setToken']),
		//确认点击协议了
		checkboxChange( val ){
			this.checkboxValue1 = val;
		},
		//点击注册
		register(){
			this.$refs.uForm.validate().then(res => {
				if ( this.checkboxValue1.length <  1) return false;
				register({
					mobile:this.model.phone,
					password:this.model.rePassword,
					validate_code_id:this.validate_code_id,
					code:this.model.code
				}).then(res=>{
					if( res.code != 0 ){
						alert('注册失败');
						return false;
					}
					//这里是回到的登录页===》我们修改成回到首页
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}, 2000);
					//把token存储在store中
					this.setToken(  res.data.access_token  );
				})
				
			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
		},
		//点击发送短信验证码
		sendCode(){
			let regTel = /^1[23456789]\d{9}$/;
			if(  !regTel.test(  this.model.phone ) ){
				alert('手机号不正确')
				return false;
			}
			
			//滑块出现
			this.isShow = true;
			
			sendCode({
				'_mall_id':1,
				'r':'api/user/phone-code',
				//'mobile':Encrypt(this.model.tel)
				'mobile':this.model.phone
			}).then(res=>{
				if( res.code != 0 ){
					//短信验证码发送不成功
					alert( '短信验证码发送不成功' );
					return;
				}
				this.validate_code_id = res.validate_code_id;
			})	
			//倒计时
			this.timeCode();
		},
		//滑动正确
		slideCode_success(){
			//请求发送验证码短信接口
			sendCode({
				'_mall_id':1,
				'r':'api/user/phone-code',
				//'mobile':Encrypt(this.model.tel)
				'mobile':this.model.phone
			}).then(res=>{
				if( res.code != 0 ){
					//短信验证码发送不成功
					alert( '短信验证码发送不成功' );
					return;
				}
				this.validate_code_id = res.validate_code_id;
			})	
			//倒计时
			this.timeCode();
		},
		//验证码倒计时
		timeCode(){
			clearInterval(this.timer);
			let codeNum = 10;
			this.timer = setInterval(()=>{
				codeNum--;
				if (codeNum <= 0) {
					clearInterval(this.timer);
					this.codeMsg = '发送验证码';
					codeNum = 60;
				} else {
					this.codeMsg = `重新发送${codeNum}秒`
				}
			},1000)
		}
	}
}
</script>

<style lang="scss" scoped>
	.register
	{
		margin-top: 100rpx;
		.tel
		{
			display: flex;
			justify-content: space-around;
			margin: 8rpx;
			.input
			{
				margin-left: -40rpx;
			}
			.bth
			{
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 16px;
				line-height: 22px;
				color: #105CF0;
				border: 1px solid #105CF0;
				border-radius: 8px;
				padding: 3rpx 17rpx;
			}
		}
		.line {
			height: 1px;
			width: 90%;
			background-color: #F1F1F1;
			margin: 0 10px;
		}
		.check
		{
			margin: 10px;
		}
		.inputcom
		{
			margin: 8rpx 30rpx;
		}
		.btn
		{
			margin-top: 67px;
			/deep/.u-button--info
			{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80%;	
				background: linear-gradient(102.42deg, #0F9DED 10.57%, #105CF0 91.22%);
				border-radius: 8px;
				color: #FFF;
				height: 54px;
			}
		}
	}
</style>